<template>
  <div class="billLabel_box">

    <Button class="billLabel_box_add" type="primary" @click="billLabelAdd">{{ $t('m.xīnzēngbiāoqiān') }}</Button>
    <div class="billLabel_box_table">
      <Table border :columns="billLabelTableList" :data="billLabelTableData">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="warning" size="small" style="margin-right: 5px" @click="billLabelEdit(row.labelId,row.labelName,row.labelRemark)">{{ $t('m.edit') }}</Button>
          <Poptip confirm :title="$t('m.right')+$t('m.delete')+'?'" @on-ok="billLabelRemove(row.labelId)" placement="left" width="20%">
            <Button type="error" size="small">{{ $t('m.delete') }}</Button>
          </Poptip>
        </template>
      </Table>
      <Modal v-model="billLabelModal" :title="this.$t('m.bqpz')" @on-ok="billLabelAddEvent" @on-cancel="billLabelCancelEvent">
        <Form ref="billLabelForm" :model="billLabelForm" :rules="billLabelFormRules" :label-width="150">
          <FormItem :label="$t('m.biāoqiānmíngchēng') +'：'" prop="billLabelName">
            <Input style="width: 80%" type="text" :placeholder="$t('m.qǐngshūrù')" v-model.trim="billLabelForm.billLabelName" number></Input>
          </FormItem>
          <FormItem :label="$t('m.biāoqiānbèizhù') +'：'" prop="billLabelRemark">
            <Input style="width: 80%" type="textarea" :placeholder="$t('m.qǐngshūrù')" v-model.trim="billLabelForm.billLabelRemark" number></Input>
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>

<script>
export default {
  name: 's0Order',
  data () {
    return {
      billLabelModal: false,
      billLabelForm: {
        billLabelName: '',
        billLabelRemark: '',
      },
      billLabelFormRules: {
        billLabelName: [{
          required: true,
          message: this.$t('m.qǐngshūrù') + this.$t('m.biāoqiānmíngchēng'),
          trigger: 'blur'
        }],
        billLabelRemark: [{
          required: true,
          message: this.$t('m.qǐngshūrù') + this.$t('m.biāoqiānbèizhù'),
          trigger: 'blur'
        }],
      },
      billLabelTableList: [{
        title: this.$t('m.biāoqiānmíngchēng'),
        key: 'labelName',
        align: 'center'
      },
      {
        title: this.$t('m.biāoqiānbèizhù'),
        key: 'labelRemark',
        align: 'center'
      },
      {
        title: this.$t('m.operate'),
        slot: 'action',
        width: 150,
        align: 'center'
      }
      ],
      billLabelTableData: []
    }
  },
  components: {},
  props: {},
  watch: {},
  methods: {
    // 取消添加标签
    billLabelCancelEvent () {
      this.billLabelModal = false
      this.billLabelForm.billLabelName = ''
      this.billLabelForm.billLabelRemark = ''
    },
    // 添加标签弹框
    billLabelAdd () {
      this.billLabelModal = true
      this.billLabelForm.billLabelName = ''
      this.billLabelForm.billLabelRemark = ''
    },
    // 添加标签方法
    billLabelAddEvent () {
      // debugger
      var param = {};
      if (this.billLabelForm.billLabelId) {
        param = {
          labelName: this.billLabelForm.billLabelName,
          labelRemark: this.billLabelForm.billLabelRemark,
          labelId: this.billLabelForm.billLabelId
        }
      } else {
        param = {
          labelName: this.billLabelForm.billLabelName,
          labelRemark: this.billLabelForm.billLabelRemark,
        }
      }
      if (this.billLabelForm.billLabelRemark != '' || this.billLabelForm.billLabelRemark != '') {
        this.$http.post('/api/laocai/remind/label/sys', param).then((res) => {
          if (res.body.code == 0) {
            this.billLabelTableDataQuery()
            this.billLabelForm.billLabelName = ''
            this.billLabelForm.billLabelRemark = ''
            this.billLabelForm.billLabelId = ''
          }
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        });
      } else {
        this.$Message.warning(this.$t('m.qǐngshūrù') + '  ' + this.$t('m.biāoqiānmíngchēng') + '  ' + this.$t('m.biāoqiānbèizhù'));
      }
    },
    // 修改标签
    billLabelEdit (labelId, labelName, labelRemark) {
      this.billLabelModal = true,
        this.billLabelForm.billLabelId = labelId
      this.billLabelForm.billLabelName = labelName
      this.billLabelForm.billLabelRemark = labelRemark
    },
    // 删除标签
    billLabelRemove (id) {
      this.$http.delete('/api/laocai/remind/label/sys?labelId=' + id).then((res) => {
        if (res.body.code == 0) {
          this.billLabelTableDataQuery()
          this.billLabelForm.billLabelName = ''
          this.billLabelForm.billLabelRemark = ''
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },
    // 查询标签列表
    billLabelTableDataQuery () {
      this.$http.get('/api/laocai/remind/label/sys/list?pageNumber=1&pageSize=100').then((res) => {
        if (res.body.code == 0) {
          this.billLabelTableData = res.data.result.list
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      })
    }
  },
  filters: {},
  computed: {},
  created () { },
  mounted () {
    this.billLabelTableDataQuery()
  },
  destroyed () { }
}
</script>

<style>
.billLabel_box {
  margin: 0 15px;
}

.billLabel_box_add {
  margin: 20px;
}

/* .ivu-input {
  width: 80%;
} */

.billLabel_box_table .ivu-poptip-confirm .ivu-poptip-body .ivu-icon {
  display: none;
}
</style>
